<!-- playground-fold -->
<!DOCTYPE html>
<html lang="en">

<head>
	<meta charset="UTF-8">
	<meta name="viewport" content="width=device-width, initial-scale=1.0">
	<title>Sample</title>
	<link rel="stylesheet" href="./main.css">
</head>

<body style="background-color: var(--sapBackgroundColor)">
	<!-- playground-fold-end -->

	<ui5-side-navigation>
		<ui5-side-navigation-item text="Home" icon="home"></ui5-side-navigation-item>
		<ui5-side-navigation-item text="People" expanded icon="group" unselectable>
			<ui5-side-navigation-sub-item text="From My Team"></ui5-side-navigation-sub-item>
			<ui5-side-navigation-sub-item text="From Other Teams"></ui5-side-navigation-sub-item>
		</ui5-side-navigation-item>
		<ui5-side-navigation-item text="Locations" icon="locate-me" unselectable>
			<ui5-side-navigation-sub-item text="Office"></ui5-side-navigation-sub-item>
			<ui5-side-navigation-sub-item text="Home"></ui5-side-navigation-sub-item>
		</ui5-side-navigation-item>
		<ui5-side-navigation-item slot="fixedItems" text="History" expanded icon="history" unselectable>
			<ui5-side-navigation-sub-item text="Today"></ui5-side-navigation-sub-item>
			<ui5-side-navigation-sub-item text="Yesterday"></ui5-side-navigation-sub-item>
		</ui5-side-navigation-item>
	</ui5-side-navigation>

	<!-- playground-fold -->
	<script type="module" src="main.js"></script>
</body>

</html>
<!-- playground-fold-end -->